<template>
  <div>
    数字 <input type="text" v-model="num"> <br>
    学生号 <input type="text" v-model="obj.student.num"> <br>
    姓名 <input type="text" v-model="obj.name"> <br>
    年龄 <input type="number" v-model="obj.age"> <br>
    <button @click="replace">全部替换</button>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';

let num = ref(0)

let obj = ref({ name: "张三", age: 10,student:{num:10086} })
// let obj = reactive({name:"张三",age:10})

// 会返回停止的函数,停止之后,无法再监听
let stopwatch =  watch(obj, (newVal, oldVal) => {
  console.log(newVal, oldVal);
  if (newVal.age>=20) {
    stopwatch()
  }
}, { deep: true,immediate:true })
// deep 开始深度监听,属性发生变化也会触发,默认false
// immediate 页面一开始,赋值的时候就可以触发监听,默认是false


watch(num, (newVal, oldVal) => {
  console.log(newVal, oldVal);
})


let replace = function () {
  obj.value = { name: "李四", age: 200 }
}

</script>

<style scoped></style>